<template>
  <view>
    <search />
    <!-- tab栏 -->
    <view class="tabs">
      <view
        class="tab"
        :class="activeIndex === index ? 'active' : ''"
        v-for="(item, index) in tabs"
        :key="index"
        @tap="getActiveIndex(index)"
        >{{ item }}</view
      >
    </view>
    <!-- 商品列表 -->
    <view class="goodsList">
      <view class="goods" v-for="goods in goodsList" :key="goods.cat_id">
        <view class="goods_left">
          <image
            class="image"
            :lazy-load="true"
            :src="goods.goods_small_logo"
            mode=""
          />
        </view>
        <view class="goods_right">
          <view class="title">
            {{ goods.goods_name }}
          </view>
          <view class="price">
            <view class="yuan">￥</view>{{ goods.goods_price }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import search from "component/search.vue";
export default {
  components: {
    search,
  },
  data() {
    return {
      tabs: ["综合", "销量", "价格"],
      goodsList: [],
      goods: [],
      activeIndex: 0,
      cid: 0,
      switch: true,
    };
  },
  onLoad(options) {
    this.cid = options.cat_id;
    this.getproList(options.cat_id);
  },
  methods: {
    getproList(id) {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
        data: {
          cid: id,
        },
        success: (res) => {
          console.log(res);
          const { goods } = res.data.message;
          this.goods = goods;
          this.goodsList = goods;
        },
      });
    },
    getActiveIndex(index) {
      this.activeIndex = index;
      if (index === 0) {
        console.log(1);
        this.goodsList = this.goods;
      } else if (index === 1) {
      } else {
        console.log(1);
        this.handClickSort();
        console.log(this.switch);
      }
    },
    handClickSort() {
      if (this.switch) {
        this.switch = false;
        return this.goodsList.sort(function (a, b) {
          let x = a["goods_price"];
          let y = b["goods_price"];
          return x > y ? -1 : x < y ? 1 : 0;
        });
      } else {
        this.switch = true;
        return this.goodsList.sort(function (a, b) {
          let x = a["goods_price"];
          let y = b["goods_price"];
          return x < y ? -1 : x > y ? 1 : 0;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  height: 88rpx;
  display: flex;
  justify-content: space-evenly;

  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    width: 184rpx;
    border-bottom: 3rpx solid transparent;
    font-size: 30rpx;
    color: #676767;
  }
  .active {
    border-bottom: 3rpx solid #ea4350;
    font-weight: 700;
  }
}
.goodsList {
  padding-left: 40rpx;
  padding-right: 26rpx;
  padding-top: 10rpx;
  .goods {
    display: flex;
    padding-left: 15rpx;
    padding-top: 9rpx;
    width: 698rpx;
    height: 209rpx;
    .goods_left {
      margin-right: 29rpx;
      width: 191rpx;
      height: 191rpx;
      .image {
        width: 191rpx;
        height: 191rpx;
      }
    }
    .goods_right {
      width: 463rpx;
      height: 191rpx;
      .title {
        margin-top: 10rpx;
        width: 463rpx;
        height: 80rpx;
        font-size: 30rpx;
        color: #434343;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        margin-top: 60rpx;
        display: flex;
        align-items: center;
        color: #ea4350;
        font-size: 28rpx;
        .yuan {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>